第十二天,今天來做個通關密語,當使用者輸入到正確文字時候跳出提示吧!
Demo,在Demo頁面直接使用鍵盤輸入通關密碼,正確就會跑出特效,這次的通關密碼是wesbos,要連續輸入且沒有錯誤才算正確!
js:邏輯主要利用陣列來儲存使用者輸入的文字,來比對是否和預設的通關密碼相同,如果相同就可以執行我們要的特效,這邊的特效是使用原作者提供的一隻js檔案,另外為了避免使用這輸入很多文字造成陣列過長,這邊使用splice語法將陣列內文字控制在一定數量,並使用join語法將陣列文字組成字串,再去比對是否跟通關密碼相符。
//宣告一個陣列儲存使用者輸入過的文字
const pressed = [];
//宣告一個通關密碼
const secretCode = 'wesbos';
//監聽鍵盤按下的動作
window.addEventListener('keyup', (e) => {
//將按下的按鍵丟到陣列中
pressed.push(e.key);
//使用者很可能會輸入很多文字,造成陣列過長,所以將這列篩選,從最後往前數
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
//把陣列用join('')重新組成字串,看是否有包含通關密碼,如果有就做事情
//這邊是使用原作者另外寫的一隻js跑出特效
if (pressed.join('').includes(secretCode)) {
console.log('DING DING!');
cornify_add();
}
});
以上就是第12天內容!